// te.js
// Copyright 2007, Alex McClung
// Functions used in the Table Editor pages.

//===================================================================================
// CONSTANTS

// HTML IDs
var TABLE_ID           = "columns"; // ID of the table that will have rows added and removed from it
var TEMPLATE_ID        = "column0"; // ID of the row in the table that serves as the template for new rows
var ROW_INDEX_CELL     = 0;         // Index (zero-based) of the cell in each row that the row index goes into
var REMOVE_LINK_CELL   = 10;        // Index (zero-based) of the cell in each row that has the 'Remove' link inserted into
var MIN_ROWS           = 1;         // Minimum number of rows in the table
var REMOVE_LINK_SYNTAX = "<input type=\"button\" onclick=\"removeRow('{I}');\" value=\"Remove\" class=\"CANCEL\" />"; // Syntax for the removal markup. {I} will be replaced with the row's index

//===================================================================================
// Variables

var oTable    = null;     // Reference to the table that we'll be adding rows to
var oTemplate = null;     // Reference to the template row
var nRows     = MIN_ROWS; // Current row count

//===================================================================================
// Public Functions

//------------------------------------------------------------------------------------
// Initializes the script
function initTE()
{
	oTable    = $(TABLE_ID).tBodies[0];
	oTemplate = $(TEMPLATE_ID);
}

//------------------------------------------------------------------------------------
// Adds a new column to the input form
function addRow()
{
	nRows++;
	var newRow = oTemplate.cloneNode(true);
	newRow.cells[ROW_INDEX_CELL].innerHTML   = nRows;
	newRow.cells[REMOVE_LINK_CELL].innerHTML = REMOVE_LINK_SYNTAX.replace(/{I}/, nRows);
	// Go through and blank out input values
	for(var j=0; j<newRow.cells.length; j++)
	{
		if(j == ROW_INDEX_CELL || j == REMOVE_LINK_CELL)
			continue;
		// Screw a bunch of if/else statements. Do them all at once.
		newRow.cells[j].firstChild.value = "";
		newRow.cells[j].firstChild.checked = "";
		newRow.cells[j].firstChild.selectedIndex = 0;
	}
	oTable.appendChild(newRow);
	_reformatTable();
}

//------------------------------------------------------------------------------------
// Removes a column from the input form
// i (int) index of the column to remove
function removeRow(i)
{
	if(nRows > MIN_ROWS)
	{
		oTable.deleteRow(i-1);
		nRows--;
		_reformatTable();
	}
}

//------------------------------------------------------------------------------------
// Reformats the table, updating element names and column indexes
function _reformatTable()
{
	// Update column counter
	$('num_columns').value = nRows;
	
	// Update all rows
	for(var i=0;i<nRows;i++)
	{
		// Easy stuff: Redo the column number and Remove link
		oTable.rows[i].cells[ROW_INDEX_CELL].innerHTML = i+1;
		oTable.rows[i].cells[REMOVE_LINK_CELL].innerHTML = (i == 0) ? "" : REMOVE_LINK_SYNTAX.replace(/{I}/, i+1);
		// Hard stuff: Go through, renaming every element
		for(var j=0; j<oTable.rows[i].cells.length; j++)
		{
			if(j == ROW_INDEX_CELL || j == REMOVE_LINK_CELL)
				continue;
			// Essentially, we're doing this:
			// I know that each cell's first child node is an input, and that their name
			// is something like foo[0]. I'm replacing [0] with the current row index
			// (resulting in foo[i]).
			var oCol = oTable.rows[i].cells[j];
			var oldName = oCol.firstChild.name;
			oCol.firstChild.name = oCol.firstChild.name.replace(/\[[0-9]+\]/, "[" + i + "]");
			oCol.firstChild.id   = oCol.firstChild.name;
		}
	}
}